<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>128-css-滚动图片.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 800px;
			height: 400px;
			border: 1px solid #bbb;
			margin: 50px auto;
			overflow: hidden;
		}
		ul{
			list-style: none;
			width: 3200px;
			height: 400px;
			animation: sport 4s linear 0s infinite normal;
		}
		@keyframes sport{
			form{
			margin-left: 0px;
			}
			to{
			margin-left: -2400px;
			}
		}
		ul:hover{
			animation-play-state: paused;
		}
		ul:hover li{
			opacity: 0.5;
		}
		ul li:hover{
			opacity: 1;
		}
		li{
			float: left;
			width: 800px;
			height: 400px;
		}
		li img{
			width: 100%;
			height: 100%;
		}
		/*
		li:nth-child(1){
			background-color: skyblue;
		}
		li:nth-child(2){
			background-color: yellow;
		}
		li:nth-child(3){
			background-color: blue;
		}
		li:nth-child(4){
			background-color: tomato;
		}
		li:nth-child(5){
			background-color: pink;
		}
		*/
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li><img src="../photo/fj1.jpeg" alt=""></li>
			<li><img src="../photo/big1.jpg" alt=""></li>
			<li><img src="../photo/8.26-02.jpeg" alt=""></li>
			<li><img src="../photo/big2.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>













